import { WorkflowContext } from "@/context/WorkflowContext";
import { AppDetailContext } from "@/context/app/detail/appDetailContext";
import { computedNodeInputReference } from "@/function/utils";
import { Box, Flex } from "@chakra-ui/react";
import dynamic from "next/dynamic";
import React, { Children, useContext, useMemo } from "react";

const MultipleRowSelect = dynamic(
    () => import('@/components/common/MySelect/MultipleRowSelect')
);

export const useReference = ({
    nodeId,
    valueType = 'any',
    value
}: any) => {
    const { appDetail } = useContext(AppDetailContext);
    const { edges, nodeLists } = useContext(WorkflowContext);
    const referenceList = useMemo(() => {
        const sourceNodes = computedNodeInputReference({
            nodeId,
            nodes: nodeLists,
            edges: edges,
            chatConfig: appDetail.chatConfig,
        })
        const list = sourceNodes.map((node)=>{
            return {
                label:(
                    <Flex>
                        <Box>{node.name}</Box>
                    </Flex>
                ),
                value:node.nodeId,
                children:node.outputs.map((output)=>{
                        return {
                            label:output.label,
                            value:output.id
                        }
                })
            }
        });
        return list;
    },[nodeLists]);

    const formValue = [];
    return {
        referenceList,
        formValue
    }
}


const Reference = ({ item, nodeId }: any) => {
    //     const referenceList:any = [{
    //         label: 'test',
    //         name: '全局变量',
    //         value: 1,
    //         children:[
    //             {
    //                 label: 'test',
    //                 name: '全局变量',
    //                 value: 2,
    //             },
    //             {
    //                 label: 'test',
    //                 name: '全局变量',
    //                 value: 3,
    //             }
    //         ]
    //     },
    //     {
    //         label: 'test',
    //         name: '全局变量',
    //         value: 2,
    //         children:[
    //             {
    //                 label: 'test11',
    //                 name: '全局变量',
    //                 value: 3,
    //             },
    //             {
    //                 label: 'test',
    //                 name: '全局变量',
    //                 value: 5,
    //             }
    //         ]
    //     }
    // ];

    // const formatValue = []
    const onSelect = () => {

    }
    const { referenceList, formatValue } = useReference({
        nodeId,
        valueType: item.valueType,
        value: item.value
    });

    console.log('referenceList',referenceList, formatValue)
    
    return (
        <ReferSelector
            placeholder={'select_reference_variable'}
            list={referenceList}
            value={formatValue}
            onSelect={onSelect}
        />
    )
}


export const ReferSelector = ({ placeholder, value, list = [], onSelect }: any) => {
    // const selectItemLabel = (()=>{
    //     if(!value){
    //         return;
    //     }
    //     const firstColumn = list.find((item)=>item.value === value[0]);
    //     if(!firstColumn){
    //         return
    //     }
    // })
    const selectItemLabel = '请选择引用变量'
    const Render = useMemo(() => {
        return (
            <MultipleRowSelect
                label={
                    selectItemLabel
                }
                value={value}
                list={list}
                onSelect={(e: any) => {
                    onSelect(e)
                }}
            >
            </MultipleRowSelect>
        )
    }, [list])

    return Render;
}


export default React.memo(Reference);